<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="css/eui.css">
    <style>
        body {
            padding: 0;
            height: 100%;
            width: 100%;
            font-weight: bold;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-aside width="300px" id="as">
            <div style="margin-bottom: 30px;text-align: center">
                <img src="imgs/a.jpeg" style="width: 80px;height: 80px;border-radius: 50px;margin: 30px 0 0 8px"
                     alt="">
                <p style="color:#303133;">欢迎回来</p>
            </div>
            <el-menu style="height: 700px;"
                     background-color="rgba(255,255,255,0)"
                     default-active="2"
                     @select="menuChange"
                     class="el-menu-vertical-demo"
                     text-color="#303133"
                     active-text-color="#ffd04b">

                <el-menu-item index="1">
                    <i class="el-icon-house"></i>
                    <span slot="title">首页</span>
                </el-menu-item>
                <el-submenu index="2">
                    <template slot="title">
                        <i class="el-icon-s-order"></i>
                        <span>入库单管理</span>
                    </template>

                    <el-menu-item index="2-1">库存展示</el-menu-item>
                    <el-menu-item index="2-2">库存添加</el-menu-item>

                </el-submenu>
                <el-submenu index="3">
                    <template slot="title">
                        <i class="el-icon-first-aid-kit"></i>
                        <span>药品信息管理</span>
                    </template>
                    <el-menu-item index="3-1">药品详情</el-menu-item>
                    <el-menu-item index="3-2">加入药品</el-menu-item>
                </el-submenu>
                <el-submenu index="4">
                    <template slot="title">
                        <i class="el-icon-shopping-bag-1"></i>
                        <span>供应商管理</span>
                    </template>
                    <el-menu-item index="4-1">查看所有供应商</el-menu-item>
                    <el-menu-item index="4-2">添加供应商</el-menu-item>
                </el-submenu>
                <el-submenu index="5">
                    <template slot="title">
                        <i class="el-icon-user-solid"></i>
                        <span>用户管理</span>
                    </template>
                    <el-menu-item index="5-1">显示所有用户信息</el-menu-item>
                    <el-menu-item index="5-2">用户日志</el-menu-item>
                    <el-menu-item index="5-3">用户记录</el-menu-item>
                    <el-menu-item index="5-4">在线用户</el-menu-item>
                </el-submenu>
                <el-submenu index="6">
                    <template slot="title">
                        <i class="el-icon-s-custom"></i>
                        <span>员工信息管理</span>
                    </template>
                    <el-menu-item index="6-1">显示所有员工</el-menu-item>
                    <el-menu-item index="6-2">添加新员工</el-menu-item>
                </el-submenu>

                <el-submenu index="7">
                    <template slot="title">
                        <i class="el-icon-message-solid"></i>
                        <span>消息通知</span>
                    </template>
                    <el-menu-item index="7-1">显示所有消息</el-menu-item>
                    <el-menu-item index="7-2">发布消息</el-menu-item>
                </el-submenu>
                <el-submenu index="8">
                    <template slot="title">
                        <i class="el-icon-s-operation"></i>
                        <span>角色权限管理</span>
                    </template>
                    <el-menu-item index="8-1">查看权限</el-menu-item>
                    <el-menu-item index="8-2">添加权限</el-menu-item>
                    <el-menu-item index="8-3">查看员工</el-menu-item>
                    <el-menu-item index="8-4">员工权限</el-menu-item>
                </el-submenu>
                <el-menu-item index="9">
                    <i class="el-icon-more"></i>
                    <span slot="title">关于我们</span>
                </el-menu-item>
            </el-menu>
        </el-aside>
        <el-container>
            <el-header style="height: 100px;" id="he">
                <img src="imgs/b.jpeg" style="width: 100px;height: 50px" alt="">
                <div style="float: right;width: 100px;height: 40px;text-align: center">
                    <el-dropdown trigger="click">
                            <span class="el-dropdown-link">
                                主题菜单<i class="el-icon-s-operation"></i>
                            </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item icon="el-icon-plus" onclick="gfg_Run(1)">简约风格</el-dropdown-item>
                            <el-dropdown-item icon="el-icon-circle-plus" onclick="gfg_Run(2)">青春活力</el-dropdown-item>
                            <el-dropdown-item icon="el-icon-circle-plus-outline" onclick="gfg_Run(3)">蓝色海洋
                            </el-dropdown-item>
                            <el-dropdown-item icon="el-icon-check" onclick="gfg_Run(4)">红色情调</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
                <div style="height: 50px;">
                    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 18px">
                        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item>活动管理</el-breadcrumb-item>
                        <el-breadcrumb-item>活动列表</el-breadcrumb-item>
                        <el-breadcrumb-item>活动详情</el-breadcrumb-item>
                    </el-breadcrumb>
                    <el-divider></el-divider>
                </div>
            </el-header>
            <el-main id="ma">
                <!-----------库存展示开始----------->
                <el-card v-if="selectedIndex=='2-1'">
                    <span style="float: right">
                        <el-input v-model="search" style="width: 200px;" size="mini" placeholder="输入关键字搜索"/>
                    </span>
                    <el-table style="width: 100%" border
                              :data="stockHeadArr.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))">
                        <el-table-column prop="id" label="序号" width="180">
                        </el-table-column>
                        <el-table-column prop="date" label="入库日期" width="300">
                        </el-table-column>
                        <el-table-column prop="person" label="入库人员" width="200">
                        </el-table-column>
                        <el-table-column prop="auditDate" label="审核日期" width="200">
                        </el-table-column>
                        <el-table-column prop="verifier" label="审核人" width="300">
                        </el-table-column>
                        <el-table-column prop="supplierName" label="供应商名">
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-popconfirm @confirm="productDelete(scope.$index, scope.row)"
                                               title="这是一段内容确定删除吗？">
                                    <el-button size="mini"
                                               type="danger" slot="reference">删除
                                    </el-button>
                                </el-popconfirm>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
                <!-----------库存展示结束----------->
                <!-----------添加入库单开始----------->
                <el-card v-if="selectedIndex=='2-2'">
                    <h1 style="text-align: center">添加药品入库单</h1>
                    <el-divider></el-divider>
                    <el-form :inline="true" style="width: 1800px">
                        <el-form-item label="入库日期">
                            <el-input size="mini" v-model="stockHead.date"></el-input>
                        </el-form-item>
                        <el-form-item label="入库人员">
                            <el-input size="mini" v-model="stockHead.person"></el-input>
                        </el-form-item><br>
                        <el-form-item label="供应商名称">
                            <el-input size="mini" v-model="stockHead.supplierName"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="text" size="medium" @click="supplierNames()">
                                <i class="el-icon-check" aria-hidden="true"></i>
                            </el-button>
                        </el-form-item>
                        <el-form-item label="地址">
                            <el-input size="mini" v-model="suppliers.address" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="邮编">
                            <el-input size="mini" v-model="suppliers.postcode" :disabled="true"></el-input>
                        </el-form-item><br>
                        <el-form-item label="供应商开户行">
                            <el-input size="mini" v-model="suppliers.bank" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="供应商银行账号">
                            <el-input size="mini" v-model="suppliers.bankId" :disabled="true"></el-input>
                        </el-form-item><br>
                        <el-form-item label="供应商电话">
                            <el-input size="mini" v-model="suppliers.supplierPhone" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="联系人">
                            <el-input size="mini" v-model="suppliers.contact" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="联系电话">
                            <el-input size="mini" v-model="suppliers.contactPhone" :disabled="true"></el-input>
                        </el-form-item>
                    </el-form>
                    <el-table :data="stockHead.stockIn" border stripe style="width: 100%;">
                        <el-table-column  type="index" label="序号" width="80">
                        </el-table-column>
                        <el-table-column prop="drugId" label="药品编码" width="180">
                            <template scope="scope">
                                <el-input size="mini" v-model="scope.row.drugId"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="药品名称" width="200">
                            <template scope="scope">
                                <el-input size="mini" v-model="scope.row.name"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="size" label="单位" width="150">
                            <template scope="scope">
                                <el-input size="mini" v-model="scope.row.size"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="pack" label="包装" width="150">
                            <template scope="scope">
                                <el-input size="mini" v-model="scope.row.pack"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="advance" label="进价" width="150">
                            <template scope="scope">
                                <el-input size="mini" v-model="scope.row.advance"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="num" label="数量" width="150">
                            <template scope="scope">
                                <el-input size="mini" v-model="scope.row.num"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="money" label="金额" width="150">
                            <template scope="scope">
                                <el-input size="mini" v-model="money"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="date" label="有效日期" width="200">
                            <template scope="scope">
                                <el-input size="mini" v-model="scope.row.date"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button v-if="scope.row.edit" type="text" size="medium" @click="confirmAdd(scope.row)">
                                    <i class="el-icon-check" aria-hidden="true"></i>
                                </el-button>
                                <el-button type="text" size="medium" @click="deleteData(scope.row,scope.$index)">
                                    <i class="el-icon-delete" aria-hidden="true"></i>
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-button type="text" @click="addData">添加一行</el-button>
                    <div>
                        审核人:   <el-input v-model="stockHead.verifier" size="mini" style="width: 150px;" placeholder="审批人"></el-input>
                        审核时间:   <el-input v-model="stockHead.auditDate" size="mini" style="width: 300px;" placeholder="审批人"></el-input>
                        总金额: <el-input size="mini" style="width: 100px" placeholder="总金额"></el-input>
                    </div>
                    <div style="text-align: center;margin-top: 50px">
                        <el-button @click="submitData">提交 </el-button>
                    </div>
                </el-card>
                <!-----------添加入库单结束----------->
                <!------------药品详情开始---------->
                <el-card v-if="selectedIndex=='3-1'">
                    <span style="float: right">
                        <el-input v-model="search" style="width: 200px;" size="mini" placeholder="输入关键字搜索"/>
                    </span>
                    <el-table style="width: 100%" border
                              :data="drugArr.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
                              style="width: 100%">
                        <el-table-column prop="index" label="序号" width="180">
                        </el-table-column>
                        <el-table-column prop="drugId" label="药品编号" width="180">
                        </el-table-column>
                        <el-table-column prop="name" label="名称" width="300">
                        </el-table-column>
                        <el-table-column prop="size" label="规格" width="100">
                        </el-table-column>
                        <el-table-column prop="pack" label="包装" width="300">
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                                <el-button type="text" size="small">编辑</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
                <!------------药品详情结束---------->
                <!-----------供应商展示----------->
                <el-card style="height: 700px;" v-if="selectedIndex=='4-1'">
                    <span style="float: right">
                        <el-input v-model="search" style="width: 200px;" size="mini" placeholder="输入关键字搜索"/>
                    </span>
                    <el-table
                            :data="supplierArr.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
                            border style="width: 100%;">
                        <el-table-column prop="index" label="序号" width="80">
                        </el-table-column>
                        <el-table-column prop="id" label="供应商编号" width="100">
                        </el-table-column>
                        <el-table-column prop="name" label="供应商名称" width="150">
                        </el-table-column>
                        <el-table-column prop="contact" label="联系人" width="100">
                        </el-table-column>
                        <el-table-column prop="contactPhone" label="联系人电话" width="150">
                        </el-table-column>
                        <el-table-column prop="supplierPhone" label="供应商电话" width="150">
                        </el-table-column>
                        <el-table-column prop="address" label="地址" width="230">
                        </el-table-column>
                        <el-table-column prop="postcode" label="邮编" width="100">
                        </el-table-column>
                        <el-table-column prop="bank" label="供应商开户行" width="120">
                        </el-table-column>
                        <el-table-column prop="bankId" label="供应商银行账号" width="200">
                        </el-table-column>
                        <el-table-column fixed="right" label="操作" width="100">
                            <template slot-scope="scope">
                                <el-button type="text" size="small">编辑</el-button>
                                <el-button type="text" size="small">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
                <!-----------供应商结束----------->
                <!-----------添加供应商开始----------->
                <el-card v-if="selectedIndex=='4-2'" style="text-align: center">
                    <h1 style="text-align: center">添加供应商</h1>
                    <el-divider></el-divider>
                    <el-form ref="supplier" style="width: 500px; margin: 0 auto" :model="supplier" label-width="150px">
                        <el-form-item label="供应商名称">
                            <el-input style="width: 300px;" v-model="supplier.name"></el-input>
                        </el-form-item>
                        <el-form-item label="联系人">
                            <el-input style="width: 300px;"  v-model="supplier.contact"></el-input>
                        </el-form-item>
                        <el-form-item label="联系人电话">
                            <el-input style="width: 300px;"  v-model="supplier.contactPhone"></el-input>
                        </el-form-item>
                        <el-form-item label="供应商电话">
                            <el-input style="width: 300px;" v-model="supplier.supplierPhone"></el-input>
                        </el-form-item>
                        <el-form-item label="地址">
                            <el-input style="width: 300px;" v-model="supplier.address"></el-input>
                        </el-form-item>
                        <el-form-item label="邮编">
                            <el-input style="width: 300px;" v-model="supplier.postcode"></el-input>
                        </el-form-item>
                        <el-form-item label="供应商开户行">
                            <el-input style="width: 300px;" v-model="supplier.bank"></el-input>
                        </el-form-item>
                        <el-form-item label="供应商银行卡号">
                            <el-input style="width: 300px;" v-model="supplier.bankId"></el-input>
                        </el-form-item>
                    </el-form>
                    <el-button type="primary" style="left: 30px;" @click="supplieras()" plain>提交</el-button>
                </el-card>
                <!-----------添加供应商结束----------->
                <!-----------用户展示页面开始----------->
                <el-card v-if="selectedIndex=='5-1'">
                    <el-table :data="userArr" border style="width: 100%">
                        <el-table-column prop="id" label="ID" width="180">
                        </el-table-column>
                        <el-table-column prop="username" label="姓名" width="180">
                        </el-table-column>
                        <el-table-column prop="phone" label="手机号">
                        </el-table-column>
                        <el-table-column prop="departmentId" label="部门编号">
                        </el-table-column>
                        <el-table-column prop="time" label="注册时间">
                        </el-table-column>
                        <el-table-column prop="birthdate" label="出生日期">
                        </el-table-column>
                        <el-table-column prop="gender" label="性别">
                        </el-table-column>
                        <el-table-column prop="cradId" label="身份证号">
                        </el-table-column>
                        <el-table-column prop="origo" label="所在地">
                        </el-table-column>
                    </el-table>
                </el-card>
                <!-----------用户展示页面结束----------->
                <!----------显示用户日志开始------------>
                <el-card v-if="selectedIndex=='5-2'">
                    <el-table
                            :data="userlogArr"
                            style="width: 100%">
                        <el-table-column prop="index" label="序号" width="100">
                        </el-table-column>
                        <el-table-column prop="id" label="用户id" width="180">
                        </el-table-column>
                        <el-table-column prop="loginTime" label="上线时间">
                        </el-table-column>
                        <el-table-column prop="logoutTime" label="下线时间">
                        </el-table-column>
                        <el-table-column prop="client" label="用户设备">
                        </el-table-column>
                        <el-table-column prop="ip" label="IP地址">
                        </el-table-column>
                        <el-table-column fixed="right" label="操作" width="100">
                            <template slot-scope="scope">
                                <el-button type="text" size="small">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-descriptions>
                        <el-descriptions-item label="用户名">{{userlogArr.username}}</el-descriptions-item>
                        <el-descriptions-item label="手机号">{{userlogArr.phone}}</el-descriptions-item>
                        <el-descriptions-item label="注册时间">{{userlogArr.time}}</el-descriptions-item>
                    </el-descriptions>
                </el-card>
                <!----------显示用户日志结束------------>
                <!----------显示所有通知开始------------->
                <el-card v-if="selectedIndex=='7-1'">
                    <el-table
                            :data="messageArr"
                            style="width: 100%">
                        <el-table-column prop="index" label="序号" width="100">
                        </el-table-column>
                        <el-table-column prop="id" label="通知编号" width="180">
                        </el-table-column>
                        <el-table-column prop="title" label="通知标题">
                        </el-table-column>
                        <el-table-column prop="category" label="通知类别">
                        </el-table-column>
                        <el-table-column prop="releaseTime" label="发布时间">
                        </el-table-column>
                        <el-table-column fixed="right" label="操作" width="100">
                            <template slot-scope="scope">
                                <el-button type="text" size="small">编辑</el-button>
                                <el-button type="text" size="small">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-descriptions>
                        <el-descriptions-item label="发布者编号">{{messageArr.publisherId}}</el-descriptions-item>
                        <el-descriptions-item label="审核者编号">{{messageArr.auditorId}}</el-descriptions-item>
                        <el-descriptions-item label="通知内容">{{messageArr.content}}</el-descriptions-item>
                    </el-descriptions>
                </el-card>
                <!----------显示所有通知结束------------->
            </el-main>
        </el-container>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="js/vue.js"></script>
<!-- import JavaScript -->
<script src="js/eui.js"></script>
<script src="js/axios.min.js"></script>
<script>
    function gfg_Run(x) {
        if (x == 1) {
            document.getElementById("as").style.background = "#b3d8ff";
            document.getElementById("he").style.background = "white";
            document.getElementById("ma").style.background = "white";
        } else if (x == 2) {
            document.getElementById("as").style.background = "greenyellow";
            document.getElementById("he").style.background = "lightgreen";
            document.getElementById("ma").style.background = "yellowgreen";
        } else if (x == 3) {
            document.getElementById("as").style.background = "#b3d8ff";
            document.getElementById("he").style.background = "#66b1ff";
            document.getElementById("ma").style.background = "lightskyblue";
        } else if (x == 4) {
            document.getElementById("as").style.background = "darksalmon";
            document.getElementById("he").style.background = "indianred";
            document.getElementById("ma").style.background = "mistyrose";
        }
    }

    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                selectedIndex: "1-1",
                //入库单展示数组
                stockHeadArr: [],
                //供应商展示数组
                supplierArr: [],
                //
                tableData: [],
                //药品数组
                drugArr: [],
                //双向绑定
                search: '',
                // 添加供应商对象
                supplier:{name:"",contact:"",contactPhone:"",supplierPhone:"",address:"",postcode:"",bank:"",bankId:""},
                //入库单的数组
                stockHead: {
                    date:"",person:"",supplierName:"",verifier:"",auditDate:"",stockIn: [],
                },
                money:"",

                suppliers:{
                    address:"",contact:"",contactPhone:"",supplierPhone:"",postcode:"",bank:"",bankId:""
                },
                //入库单数组结束
                //用户展示数组
                userArr:[],
                //用户日志展示数组
                userlogArr:[],
                //通知展示数组
                messageArr:[]
            }
        },
        methods: {
            menuChange(index) {
                console.log(index);
                 if (index == "3-2") {
                    alert("添加商品")
                } else {
                    v.selectedIndex = index;
                }
            },
            //添加供应商方法
            supplieras(){
                axios.post("/supplier/insert",v.supplier).then(function (response) {
                   let json = response.data
                    if (json.state == 20000){
                        alert("添加成功")
                        location.reload();
                    }else{
                        alert(json.message)
                    }
                })
            },
            //入库单添加的点击方法
            addData() {
                this.stockHead.stockIn.push({
                    edit: true,
                });
            },
            //确认添加
            confirmAdd(row) {
                row.edit = false;
            },
            //修改
            editData(row) {
                row.edit = true;
            },
            //删除
            deleteData(row, index) {
                this.stockIn.splice(index, 1);
            },
            submitData() {
                axios.post("/stock/insert",v.stockHead).then(function (response) {
                    let json = response.data;
                    if (json.state==20000){
                        alert("添加完成");
                    }else {
                        alert(json.message)
                    }
                })

            },
            //入库单供应商请求
            supplierNames(){
                axios.get("/supplierByName/select?name="+this.stockHead.supplierName).then(function (response) {
                    let json = response.data;
                    if (json.state==20000){
                        v.suppliers=json.data;
                    }else {
                        alert(json.message)
                    }
                })
            }
            //结束
        },
        created: function () {
            //库存查询请求
            // axios.get("/stockHead/select").then(function (response) {
            //     v.stockHeadArr = response.data
            // })
            //供应商查询请求
            axios.get("/supplier/select").then(function (response) {
                let json = response.data;
                v.supplierArr = json.data
            })
            //药品查询请求
            // axios.get("/drugArr/select").then(function (response) {
            //     v.drugArr = response.data
            // })
            //所有用户查询请求
            // axios.get("/user/select").then(function (response) {
            //     v.userArr = response.data;
            // })
            //用户日志(以及用户列表的name,phone,time)
            // axios.get("/userlog/select").then(function (response) {
            //         v.userlogArr = response.data;
            // })
            //通知展示请求(message表格)
            // axios.get("/message/select").then(function (response) {
            //             v.messageArr = response.data;
            // })
        }
    })
</script>
</html>